<template>
    <el-container>
        <el-header>干部信息管理</el-header>
        <el-main>
            <div style="width: 1100px">
                <div style="height: 80px">
                    <el-input placeholder="输入姓名查询"
                              style="width: 200px;margin-left: 20px"
                              maxlength="100"
                              v-model.trim="searchName"></el-input>
                    <el-input placeholder="输入部门名称查询"
                              style="width: 200px;margin-left: 20px"
                              maxlength="100"
                              v-model.trim="searchLeague"></el-input>
                    <el-button style="margin-left: 20px" @click="getUserList()" type="primary"
                               size="small">搜索
                    </el-button>
                    <el-button style="margin-left: 20px" @click="dialog1=true" type="primary"
                               size="small">新增人员
                    </el-button>
                    <br>
                </div>

                <div style="width: 300px;background-color: #a7ffef;height: auto;float: left;margin-left: 20px">
                    <dl v-for="(userList,k) in leagueList" style="font-weight: 700;font-size: 18px;line-height: 21px;">
                        <dt>{{k}}</dt>
                        <dd v-for="(u,k) in userList">
                            <a class="aa" href="#"
                               @click="setSelectUserInfo(u.name,u.leagueName,u.idcord,u.id)">{{u.name}}</a>
                        </dd>
                    </dl>

                </div>
                <div style="width: 650px;background-color: #fffcb8;height: auto;float: left;margin-left: 50px">
                    <h2>干部基本信息表</h2>
                    <table width="600px" border="1" cellspacing="0" cellpadding="10" height="300px">
                        <tr>
                            <td>姓名</td>
                            <td>{{name}}</td>
                        </tr>
                        <tr>
                            <td>部门</td>
                            <td>{{leagueName}}</td>
                        </tr>
                        <tr>
                            <td>身份证号</td>
                            <td>{{idcord}}</td>
                        </tr>
                        <tr>
                            <td>操作</td>
                            <td>
                                <span v-if="!idcord||idcord=='-'">-</span>
                                <a v-else class="aa" href="#"
                                   @click="deleteUser(idcord)">删除该人员</a>
                            </td>
                        </tr>
                    </table>
                </div>

                <el-dialog id="mark" title="新增人员" :visible.sync="dialog1" width="540px" :show-close="true" center>
                    <el-form style="border: 1px solid #e0e0e0;margin-top: 20px" :model="ruleForm">
                        <el-form-item label="本人姓名" prop="addName" label-width="80px">
                            <el-input v-model="ruleForm.addName"></el-input>
                        </el-form-item>

                        <el-form-item label="身份证号" prop="addIdcord" label-width="80px">
                            <el-input v-model="ruleForm.addIdcord" maxlength="18"></el-input>
                        </el-form-item>
                        <el-form-item label="部门名称" prop="addLeagueName" label-width="80px">
                            <el-input v-model="ruleForm.addLeagueName" maxlength="18"></el-input>
                        </el-form-item>
                        <el-button type="primary" @click="dialog1=false">取消</el-button>&nbsp;
                        <el-button type="danger" @click="addUser()">添加</el-button>&nbsp;
                    </el-form>


                </el-dialog>

            </div>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: 'Home',
        data() {
            return {
                dialog1: false,
                leagueList: {},
                name: "-",
                leagueName: "-",
                idcord: "-",
                id: "",

                ruleForm: {
                    addLeagueName: "",
                    addIdcord: "",
                    addName: ""
                },


                searchLeague: "",
                searchName: "",
                searchIdcord: "",
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val)
            },
        },
        created() {
            this.getUserList()
        },
        methods: {
            setSelectUserInfo(name, leagueName, idcord, id) {
                this.name = name
                this.leagueName = leagueName
                this.idcord = idcord
                this.id = id
            },
            getUserList() {

                this.leagueList={}
                this.name="-"
                this.leagueName="-"
                this.idcord="-"
                let param = new FormData();
                param.append("searchLeague", this.searchLeague)
                param.append("searchName", this.searchName)
                param.append("searchIdcord", this.searchIdcord)

                this.PF('/personSqlLite/getUserList', param, {}).then((response) => {

                    if (response.data.retCode == 1000) {
                        let res = response.data
                        this.leagueList = res.results
                    } else {
                        this.$message({
                            showClose: true,
                            message: response.data.retMsg,
                            type: "error"
                        })
                    }



                }).catch(function (error) {
                    console.log(error)
                    // this.$elementMessage('网络繁忙，请稍后再试', "error")
                })
            },
            addUser() {
                if (this.ruleForm.addLeagueName.length == 0) {
                    this.$message({
                        showClose: true,
                        message: "部门名称尚未填写",
                        type: "error"
                    })
                    return
                }
                if (this.ruleForm.addName.length == 0) {
                    this.$message({
                        showClose: true,
                        message: "姓名尚未填写",
                        type: "error"
                    })
                    return
                }
                if (this.ruleForm.addIdcord.length == 0) {
                    this.$message({
                        showClose: true,
                        message: "身份证号尚未填写",
                        type: "error"
                    })
                    return
                }
                let param = new FormData();
                param.append("leagueName", this.ruleForm.addLeagueName)
                param.append("name", this.ruleForm.addName)
                param.append("idcord", this.ruleForm.addIdcord)
                this.dialog1 = false
                this.PF('/personSqlLite/addUser', param, {}).then((response) => {

                    if (response.data.retCode == 1000) {
                        this.$message({
                            showClose: true,
                            message: "添加成功",
                            type: "success"
                        })
                        this.ruleForm.addLeagueName=''
                        this.ruleForm.addName=''
                        this.ruleForm.addIdcord=''
                        this.getUserList()
                    } else {
                        this.$message({
                            showClose: true,
                            message: "添加失败，失败原因：" + response.data.retMsg,
                            type: "error"
                        })
                    }

                }).catch(function (error) {
                    console.log(error)
                    // this.$elementMessage('网络繁忙，请稍后再试', "error")
                })
            },
            deleteUser(idcord) {
                let param = new FormData();
                param.append("idcord", idcord)

                this.PF('/personSqlLite/delUser', param, {}).then((response) => {

                    if (response.data.retCode == 1000) {

                        this.$message({
                            showClose: true,
                            message: "删除成功",
                            type: "success"
                        })
                        this.name = "-"
                        this.leagueName = "-"
                        this.idcord = "-"
                        this.getUserList()
                    }else {
                        this.$message({
                            showClose: true,
                            message: "删除失败，失败原因：" + response.data.retMsg,
                            type: "error"
                        })
                    }

                }).catch(function (error) {
                    console.log(error)
                    // this.$elementMessage('网络繁忙，请稍后再试', "error")
                })
            },
        }
    }
</script>

<style scoped>
    @import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");

    .leftLabel {
        float: left;
        display: block;
    }

    .rightInput {
        float: left;
        display: block;
    }

    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        height: 80px !important;
        line-height: 80px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        height: 100% !important;
        line-height: 100% !important;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .ztree {
        margin: 0;
        padding: 5px;
        color: #333;
    }

    .aa:hover {
        color: #405aff;
    }

    .aa {
        color: red;
        text-decoration: none;
        font-weight: 600;
    }

</style>
